<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>命名插槽 有多个插槽让父元素提供数据</h1>
			<display>
				<template #title><h1>精通</h1></template>
				<template #author><h5>孙卫青</h5></template>
				<template #default>学习vue.js</template>
			</display>
		</div>
		
		<template id="display-temp">
			<div style="background-color:lightblue;">
				<h1>子组件</h1>
				<div><slot name="title"></slot></div>
				<div><slot name="author"></slot></div>
				<div><slot></slot></div>
				</div>
		</template>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						"message":"Hello Vue!",		
						"name":"张三"
					}
				}
			});
			app.component('display',{
				template:'#display-temp'
			})
			var vm = app.mount("#app")	
		</script>
	</body>
</html>
